import React from 'react';
import { Card, Row, Col, Statistic, List, Typography, Divider, Calendar, Badge } from 'antd';
import { ClockCircleOutlined, CalendarOutlined, ReadOutlined, DollarOutlined } from '@ant-design/icons';
import EmployeeAttendanceCard from '../../components/attendance/EmployeeAttendanceCard';

const { Title, Paragraph } = Typography;

/**
 * 员工仪表盘页面
 * 显示员工个人信息和相关数据
 */
const EmployeeDashboard = () => {
    // 模拟数据
    const stats = [
        { title: '本月考勤', value: '22/23', icon: <ClockCircleOutlined /> },
        { title: '剩余年假', value: '8天', icon: <CalendarOutlined /> },
        { title: '培训课程', value: 3, icon: <ReadOutlined /> },
        { title: '本月薪资', value: '¥ 12,000', icon: <DollarOutlined /> }
    ];

    const notifications = [
        '您有一个新的培训课程需要参加',
        '您的请假申请已被批准',
        '本月考勤报表已生成',
        '公司将于下周五举行团建活动',
        '您有一个待完成的绩效自评'
    ];

    // 日历数据
    const getListData = (value) => {
        const day = value.date();
        
        if (day === 15) {
            return [
                { type: 'warning', content: '月中会议' },
            ];
        }
        if (day === 25) {
            return [
                { type: 'success', content: '发薪日' },
            ];
        }
        return [];
    };
      
    const dateCellRender = (value) => {
        const listData = getListData(value);
        return (
            <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                {listData.map((item, index) => (
                    <li key={index}>
                        <Badge status={item.type} text={item.content} />
                    </li>
                ))}
            </ul>
        );
    };

    return (
        <div>
            <Title level={2}>员工仪表盘</Title>
            <Paragraph>欢迎回来，您可以在这里查看个人信息和通知。</Paragraph>
            
            <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
                <Col xs={24} md={12}>
                    <EmployeeAttendanceCard />
                </Col>
                <Col xs={24} md={12}>
                    <Row gutter={[16, 16]}>
                        {stats.map((stat, index) => (
                            <Col xs={12} key={index}>
                                <Card>
                                    <Statistic 
                                        title={stat.title}
                                        value={stat.value}
                                        prefix={stat.icon}
                                    />
                                </Card>
                            </Col>
                        ))}
                    </Row>
                </Col>
            </Row>

            <Divider orientation="left">通知与日程</Divider>
            
            <Row gutter={[16, 16]}>
                <Col xs={24} md={12}>
                    <Card title="我的通知">
                        <List
                            dataSource={notifications}
                            renderItem={(item) => (
                                <List.Item>
                                    {item}
                                </List.Item>
                            )}
                        />
                    </Card>
                </Col>
                <Col xs={24} md={12}>
                    <Card title="日程安排" style={{ height: '100%' }}>
                        <Calendar fullscreen={false} dateCellRender={dateCellRender} />
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default EmployeeDashboard;